<template>
  <div class="table">
    <ExcelDown name="first-excel" worksheet="firstSheet" :data="tableData" :fields="excelFileds">
      <el-button>下载</el-button>
    </ExcelDown>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { excelOptions } from "../options"
export default {
  name: 'TableName',
  data() {
    return {
      tableData: [],
      tableMergeOptions: {
        age: 'name',
        sex: 'name',
        address: 'sex'
      },
      excelFileds: Object.freeze(excelOptions)
    }
  },
  created() {
    // const names = ['小明', '小红', '小刚', '小青']
    this.tableData = require('../mock.json')
    // console.log(JSON.stringify(this.tableData));
  },
  methods: {
    arraySpanMethod(p) {
      // console.log(p);
      const { rowIndex, column } = p;
      /* try {
        console.log(aaa)
      } catch(err) {
        console.log(err);
      } */
      console.error(new Error('这是一条错误信息'))
      // return this.mergeTableLikeTermData('name', rowIndex)
      /* if (this.tableMergeOptions[column.property]) {
        let num = 1
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (
            this.tableData[i][this.tableMergeOptions[column.property]] !==
            this.tableData[i - 1][this.tableMergeOptions[column.property]]
          )
            break
          num = i
        }
        if (
          rowIndex <= num &&
          this.tableData[rowIndex][this.tableMergeOptions[column.property]] ===
          this.tableData[rowIndex + 1]?.[
            this.tableMergeOptions[column.property]
          ]
        ) {
          return this.merge(rowIndex, column.property, num)
        }
      } else { */
      return this.merge(
        rowIndex,
        column.property,
        this.tableMergeOptions[column.property]
      )
      // }
      /* if (
          this.tableData[rowIndex][column.property] ===
          this.tableData[rowIndex - 1]?.[column.property]
        ) {
          // if (this.tableData[rowIndex].name === this.tableData[rowIndex + 1]?.name) {
          return [
            column.rowspan > 1 ? column.rowspan + 1 : 0,
            column.rowspan > 1 ? 1 : 0,
          ]
        } */

      /* if (rowIndex % 5 === 0) {
        if (columnIndex === 0) {
          return [5, 1]
        }
      } else {
        if (columnIndex === 0) {
          return [0, 0]
        }
      } */
    },
        /**
     * 合并行。检查并合并具有相同属性值的行。
     * @param {number} rowIndex 当前行索引。
     * @param {string} prop 需要比较的属性名。
     * @param {string} parentProp 父属性名，可选，用于进一步筛选。
     * @returns {Array} 如果发现可合并行，返回合并行的长度和方向（0代表向上合并，1代表向下合并），否则返回空。
     */
     merge(rowIndex, prop, parentProp) {
      // 当没有指定父属性时，检查当前行与上一行的属性值是否相同
      if (!parentProp) {
        if (
          this.tableData[rowIndex][prop] ===
          this.tableData[rowIndex - 1]?.[prop]
        )
          return [0, 1] // 向上合并一行
      }
      // 检查当前行与上一行的属性值和父属性值是否都相同
      if (
        this.tableData[rowIndex][prop] ===
          this.tableData[rowIndex - 1]?.[prop] &&
        this.tableData[rowIndex][parentProp] ===
          this.tableData[rowIndex - 1]?.[parentProp]
      )
        return [0, 1] // 向上合并一行

      // 检查当前行与下一行的属性值是否相同，并计算可以合并的行数
      if (
        this.tableData[rowIndex][prop] === this.tableData[rowIndex + 1]?.[prop]
      ) {
        let num = 1 // 默认合并下一行
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          // 如果指定了父属性，同时检查父属性值是否相同
          if (parentProp) {
            if (
              this.tableData[i][prop] !== this.tableData[i - 1][prop] ||
              this.tableData[i][parentProp] !==
                this.tableData[i - 1][parentProp]
            )
              break // 发现不匹配，结束循环
          }
          // 检查行属性值是否相同，不相同则结束循环
          if (this.tableData[i][prop] !== this.tableData[i - 1][prop]) break
          num++ // 增加合并行数
        }
        return [num, 1] // 向下合并指定行数
      }
    },
    mergeTableLikeTermData(key, rowIndex) {
      const keyValue = this.tableData[rowIndex][key]

      if (rowIndex > 0) {
        if (
          this.tableData[rowIndex][key] !== this.tableData[rowIndex - 1][key]
        ) {
          let i = rowIndex
          let number = 0

          while (i < this.tableData.length) {
            if (this.tableData[i][key] === keyValue) {
              i++
              number++
            } else {
              i = this.tableData.length
            }
          }

          return { rowspan: number, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 1 }
        }
      } else {
        let i = rowIndex
        let number = 0

        while (i < this.tableData.length) {
          if (this.tableData[i][key] === keyValue) {
            i++
            number++
          } else {
            i = this.tableData.length
          }
        }
        return { rowspan: number, colspan: 1 }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.table {
}
</style>
